<template>
  <div class="demo">
    <div class="box">
      <div class="color-box" style="background-color: #000">
        <h2 class="title">基础黑色</h2>
        <div class="text">#000</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #17233d">
        <h2 class="title">标题 Title</h2>
        <div class="text">#17233d</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #515a6e">
        <h2 class="title">正文 Content</h2>
        <div class="text">#515a6e</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #808695">
        <h2 class="title">辅助/图标 Assist Color</h2>
        <div class="text">#808695</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #c5c8ce">
        <h2 class="title">失效</h2>
        <div class="text">#c5c8ce</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #dcdee2">
        <h2 class="title">边框</h2>
        <div class="text">#dcdee2</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #e8eaec">
        <h2 class="title">分割线</h2>
        <div class="text">#e8eaec</div>
      </div>
    </div>
    <div class="box">
      <div class="color-box" style="background-color: #c5c8ce">
        <h2 class="title">背景</h2>
        <div class="text">#c5c8ce</div>
      </div>
    </div>
    <div class="box">
      <div
        class="color-box"
        style="background-color: #fff; border: 1px solid #eee; color: #333"
      >
        <h2 class="title">基础白色</h2>
        <div class="text">#fff</div>
      </div>
    </div>
  </div>
</template>
